import React, { useState } from 'react';
import { Modal, Button, Input,Select } from 'antd';

import './Add.less';
function Add() {
    const [isModalVisible, setIsModalVisible] = useState(false);

    const { Option } = Select;

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = (e) => {
        setIsModalVisible(false);
        console.log(e);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    // 下拉列表 
    function handleChange(value) {
        console.log(`selected ${value}`);
      }

    return (
        <>
            <Button type="primary" onClick={showModal}> 添加</Button>
            {/* 模态框 */}
            <Modal title="添加" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <div className="baseInfo">
                    <ul>
                        <li>
                            <p>ID:</p>
                            <input placeholder="CJR-1239872"></input>
                        </li>
                        <li>
                            <p>姓名:</p>
                            <input placeholder="请输入姓名"></input>
                        </li><li>
                            <p>年龄：</p>
                            <input placeholder="请输入年龄"></input>
                        </li><li>
                            <p>性别</p>
                            {/* <input placeholder="CJR-1239872"></input> */}
                            <Select defaultValue="lucy" onChange={handleChange} className="select">
                                <Option value="jack">男</Option>
                                <Option value="lucy">女</Option>
                            </Select>
                        </li>
                        <li>
                            <p>爱好特长：</p>
                            <input placeholder="请输入爱好特长"></input>
                        </li>
                        <li>
                            <p>健康状况</p>
                            <input placeholder="请输入健康状况"></input>
                        </li>
                        <li>
                            <p>电话</p>
                            <input placeholder="请输入电话"></input>
                        </li>
                        <li>
                            <p>通讯地址</p>
                            <input placeholder="请输入通讯地址"></input>
                        </li>
                    </ul>
                    <p>亲属关系</p>
                    <div className="relatOne">
                        <Input placeholder="请输入姓名" className="Inp" />
                        <Input placeholder="请输入关系" className="Inp" />
                        <Input placeholder="请输入电话" className="Inp" />

                    </div>
                    <div className="relatTwo">
                        <Input placeholder="请输入姓名" className="Inp" />
                        <Input placeholder="请输入关系" className="Inp" />
                        <Input placeholder="请输入电话" className="Inp" />
                    </div>
                </div>
            </Modal>
        </>
    )
}
export default Add;